<template>
  <div id="article">
    <div class="new">
      <div class="title">最新分享</div>
      <div class="content">
        <div class="itemFather" v-for="(item, index) in newArticle" :key="index" @click="newClick(index)">
          <div class="itemTitle">{{item.title.length > 0 ? item.title : '文章标题'}}</div>
          <div class="itemContent">{{item.content.length > 0 ? item.content : '文章简介'}}</div>
          <div class="itemFooter">
            <div class="footer-l">
              <div class="footer-l-item">
                <span><img :src="imgSrc1" alt="阅读" width="6%"></span>
                <span>{{item.views > 0 ? item.views : 0}}</span>
              </div>
              <div class="footer-l-item">
                <span><img :src="imgSrc2" alt="评论" width="6%"></span>
                <span>{{item.comment > 0 ? item.comment : 0}}</span>
              </div>
              <div class="footer-l-item">
                <span><img :src="imgSrc3" alt="点赞" width="6%"></span>
                <span>{{item.likes > 0 ? item.likes : 0}}</span>
              </div>
            </div>
            <div class="footer-r">
              <div>{{item.time | timefilters}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hot">
      <div class="title">热门文章</div>
      <div class="content">
        <div class="itemFather" v-for="(item, index) in hotArticle" :key="index" @click="hotClick(index)">
          <div class="itemTitle">{{item.title.length > 0 ? item.title : '文章标题'}}</div>
          <div class="itemContent">{{item.content.length > 0 ? item.content : '文章简介'}}</div>
          <div class="itemFooter">
            <div class="footer-l">
              <div class="footer-l-item">
                <span><img :src="imgSrc1" alt="阅读" width="6%"></span>
                <span>{{item.views > 0 ? item.views : 0}}</span>
              </div>
              <div class="footer-l-item">
                <span><img :src="imgSrc2" alt="评论" width="6%"></span>
                <span>{{item.comment > 0 ? item.comment : 0}}</span>
              </div>
              <div class="footer-l-item">
                <span><img :src="imgSrc3" alt="点赞" width="6%"></span>
                <span>{{item.likes > 0 ? item.likes : 0}}</span>
              </div>
            </div>
            <div class="footer-r">
              <div>{{item.time | timefilters}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      imgSrc1: require('../img/views.png'),
      imgSrc2: require('../img/comment.png'),
      imgSrc3: require('../img/likes.png'),
      newArticle: [
        {
          title: 'CSS：文字竖向排列',
          content: 'writing-mode: vertical-lr; // 从左向右排列writing-mode: vertica...',
          views: 4,
          comment: 0,
          likes: 0,
          time: '2020-04-25T21:58:23.000+08:00',
          id: '5fe21077ae28'
        },
        {
          title: 'cursor属性：鼠标样式',
          content: 'default：默认光标（通常是一个箭头）auto：默认。浏览器设置的光标crosshair：光标呈现为十字线po...',
          views: 3,
          comment: 0,
          likes: 0,
          time: '2020-04-25T21:51:04.000+08:00',
          id: '99a14a4afe9d'
        }
      ],
      hotArticle: [
        {
          title: '华为荣耀笔记本Linux转win10系统教程-亲测有用',
          content: '前言 本人由于要大学毕业了，所以想把自己的台式电脑换成笔记本，因为我也能想到，在刚刚毕业出去找工作这一年两年，自己...',
          views: 8171,
          comment: 2,
          likes: 5,
          time: '2019-12-07T23:23:55.000+08:00',
          id: 'a5e09f17f452'
        }
      ]
    }
  },
  filters: { // 日期时间过滤器
    timefilters(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val);   //val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
       let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
        return times;
      }
    }
  },
  created() {
    this.$axios.get('https://www.jianshu.com/asimov/users/slug/23749041c9c0/public_notes?order_by=shared_at')
    .then((res) => {
      for(let i = 0; i < 2; i++) {
        // 标题
        this.newArticle[i].title = res.data[i].object.data.title
        // 大致内容
        this.newArticle[i].content = res.data[i].object.data.public_abbr
        // 阅读数
        this.newArticle[i].views = res.data[i].object.data.views_count
        // 评论数
        this.newArticle[i].comment = res.data[i].object.data.public_comments_count
        // 点赞数
        this.newArticle[i].likes = res.data[i].object.data.likes_count
        // 发布时间
        this.newArticle[i].time = res.data[i].object.data.first_shared_at
        // 链接ID
        this.newArticle[i].id = res.data[i].object.data.slug
      }
    })
    this.$axios.get('https://www.jianshu.com/asimov/users/slug/23749041c9c0/public_notes?order_by=top')
    .then((res) => {
      for(let i = 0; i < 1; i++) {
        // 标题
        this.hotArticle[i].title = res.data[i].object.data.title
        // 大致内容
        this.hotArticle[i].content = res.data[i].object.data.public_abbr
        // 阅读数
        this.hotArticle[i].views = res.data[i].object.data.views_count
        // 评论数
        this.hotArticle[i].comment = res.data[i].object.data.public_comments_count
        // 点赞数
        this.hotArticle[i].likes = res.data[i].object.data.likes_count
        // 发布时间
        this.hotArticle[i].time = res.data[i].object.data.first_shared_at
        // 链接ID
        this.hotArticle[i].id = res.data[i].object.data.slug
      }
    })
  },
  computed:{
  },
  watch:{
  },
  methods: {
    newClick(index) {
      let api = 'https://www.jianshu.com/p/'+this.newArticle[index].id
      window.open(api)
    },
    hotClick(index) {
      let api = 'https://www.jianshu.com/p/'+this.hotArticle[index].id
      window.open(api)
    }
  },
};
</script>

<style scoped>
#article {
  height: 100%;
  width: 100%;
  /* border: 1px solid #ccc; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.new {
  flex: 60%;
}
.hot {
  flex: 40%;
}
.title {
  height: 30px;
  font-size: 26px;
  font-weight: 800;
  margin-left: 10px;
  cursor: default;
  color: #000;
}

.itemFather {
  border: 1px solid #eee;
  border-radius: 6px;
  margin: 10px;
  padding: 5px;
  transition: all .5s;
}
.itemFather:hover {
  color: #fff;
  cursor: pointer;
  background-color: rgba(0, 0, 0, .6);
}
.itemTitle {
  font-size: 20px;
  font-weight: 600;
  margin: 5px;
}
.itemContent {
  height: 50px;
  margin: 0 5px;
  color: #aaa;
  font-size: 18px;
}
.itemFooter {
  display: flex;
  justify-content: space-between;
  color: #aaa;
}
.footer-l {
  display: flex;
  padding-left: 10px;
}
.footer-l div {
  margin-right: -180px;
}
.footer-l-item span {
  margin-right: 5px;
}
.footer-r {
  padding-right: 10px;
  color: #aaa;
}
</style>
